<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天/月分统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/animate.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.min.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="row white-bg dashboard-header">
	<!-- Panel Other -->
	<div class="ibox float-e-margins">
		<div class="ibox-content">
			<div class="row row-lg">
				<div class="col-sm-12">
					<div class="example-wrap">
						<!-- start toolbar -->
						<div class="col-sm-12">
							<form class="form-horizontal" role="form" id="queryDayStatisticsForm">
								<div class="row">
									<div class="col-sm-3">
										<div class="form-group">
											<label class="col-sm-3 control-label">开始时间</label>
											<div class="col-sm-8">
												<input type="text" class="form-control layer-date" placeholder="开始时间" id="daystart" 
													autocomplete="off" name="start">
											</div>
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="col-sm-3 control-label">结束时间</label>
											<div class="col-sm-8">
												<input type="text" class="form-control layer-date" placeholder="结束时间" id="dayend" 
													autocomplete="off" name="end">
											</div>
										</div>
									</div>
									<div class="col-sm-3">
										<button type="button" class="btn btn-primary" id="queryDay">
	                                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询
	                                    </button>
										<button type="button" class="btn btn-info" onclick="location.reload();">
	                                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 刷新
	                                    </button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="width:1600px; margin:0 auto 0;">
       <div style="overflow:hidden; margin-bottom:40px;"></div> 
       <div id="echarts-sum" style="text-align: center; color:#61A0A8;">运费每日总和</div>
	   <div id="mychar" style="width: 1600px;
		height:420px;
		margin:20px auto 0;"></div>
    </div>
    <div class="ibox float-e-margins">
		<div class="ibox-content">
			<div class="row row-lg">
				<div class="col-sm-12">
					<div class="example-wrap">
						<!-- start toolbar -->
						<div class="col-sm-12">
							<form class="form-horizontal" role="form" id="queryDayStatisticsForm">
								<div class="row">
									<div class="col-sm-3">
										<div class="form-group">
											<label class="col-sm-3 control-label">开始时间</label>
											<div class="col-sm-8">
												<input type="text" class="form-control layer-date" placeholder="开始时间" id="monthstart" 
													autocomplete="off" name="start">
											</div>
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="col-sm-3 control-label">结束时间</label>
											<div class="col-sm-8">
												<input type="text" class="form-control layer-date" placeholder="结束时间" id="monthend" 
													autocomplete="off" name="end">
											</div>
										</div>
									</div>
									<div class="col-sm-3">
										<button type="button" class="btn btn-primary" id="queryMonth">
	                                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询
	                                    </button>
										<button type="button" class="btn btn-info" onclick="location.reload();">
	                                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 刷新
	                                    </button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <div style="width:1600px; margin:0 auto 0;">
       <div style="overflow:hidden; margin-bottom:40px;"></div> 
       <div style="text-align: center; color:#61A0A8;">运费每月总和</div>
	   <div id="mychart" style="width: 1600px;
		height:420px;
		margin:20px auto 0;"></div>
    </div>
</div>
<!--  -->
<div class="row white-bg dashboard-header">
	<!-- Panel Other -->
	<div class="ibox float-e-margins">
		<div class="ibox-content">
			<div class="row row-lg">
				<div class="col-sm-12">
					<div class="example-wrap">
						<!-- start toolbar -->
						<div class="col-sm-12">
							<form class="form-horizontal" role="form" id="queryDayStatisticsForm">
								<div class="row">
									<div class="col-sm-3">
										<div class="form-group">
											<label class="col-sm-3 control-label">开始时间</label>
											<div class="col-sm-8">
												<input type="text" class="form-control layer-date" placeholder="开始时间" id="daystartDate" 
													autocomplete="off" name="startDate">
											</div>
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="col-sm-3 control-label">结束时间</label>
											<div class="col-sm-8">
												<input type="text" class="form-control layer-date" placeholder="结束时间" id="dayendDate" 
													autocomplete="off" name="endDate">
											</div>
										</div>
									</div>
									<div class="col-sm-3">
										<button type="button" class="btn btn-primary" id="queryDayStatisticsBtn">
	                                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询
	                                    </button>
										<button type="button" class="btn btn-info" onclick="location.reload();">
	                                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 刷新
	                                    </button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="width:1600px; margin:0 auto 0;">
       <div style="overflow:hidden; margin-bottom:40px;"></div> 
       <div id="echarts-sum" style="text-align: center; color:#61A0A8;">费用统计表</div>
	   <div id="bar" style="width: 1600px;
		height:420px;
		margin:20px auto 0;"></div>
    </div>
    <div class="ibox float-e-margins">
		<div class="ibox-content">
			<div class="row row-lg">
				<div class="col-sm-12">
					<div class="example-wrap">
						<!-- start toolbar -->
						<div class="col-sm-12">
							<form class="form-horizontal" role="form" id="queryDayStatisticsForm">
								<div class="row">
									<div class="col-sm-3">
										<div class="form-group">
											<label class="col-sm-3 control-label">开始时间</label>
											<div class="col-sm-8">
												<input type="text" class="form-control layer-date" placeholder="开始时间" id="monthstartDate" 
													autocomplete="off" name="startDate">
											</div>
										</div>
									</div>
									<div class="col-sm-3">
										<div class="form-group">
											<label class="col-sm-3 control-label">结束时间</label>
											<div class="col-sm-8">
												<input type="text" class="form-control layer-date" placeholder="结束时间" id="monthendDate" 
													autocomplete="off" name="endDate">
											</div>
										</div>
									</div>
									<div class="col-sm-3">
										<button type="button" class="btn btn-primary" id="queryMonthStatisticsBtn">
	                                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询
	                                    </button>
										<button type="button" class="btn btn-info" onclick="location.reload();">
	                                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 刷新
	                                    </button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <div style="width:1600px; margin:0 auto 0;">
       <div style="overflow:hidden; margin-bottom:40px;"></div> 
       <div style="text-align: center; color:#61A0A8;">费用统计表</div>
	   <div id="char" style="width: 1600px;
		height:420px;
		margin:20px auto 0;"></div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/js/content.min.js?v=1.0.0"></script>
<script src="${pageContext.request.contextPath}/js/plugins/layer/layer.min.js"></script>
<script src="${pageContext.request.contextPath}/js/public/ttbj-core.js"></script>
<script src="${pageContext.request.contextPath}/laydate5.0.7/laydate.js"></script>
<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>

<script type="text/javascript">
var myBar = echarts.init(document.getElementById('bar'));
var myChar = echarts.init(document.getElementById('char'));
var myech = echarts.init(document.getElementById('mychar'));
var myChart = echarts.init(document.getElementById('mychart'));
var weekXData = [];
var weekupData = [];
var weektowData = [];
var weekthirdData = [];
var weekfourthData = [];
var monthXData = [];
var monthupData = [];
var monthtowData = [];
var monththirdData = [];
var monthfourthData = [];
var moneyxsumday = [];
var moneyxsummonth = [];
var moneysumday = [];
var moneysummonth = [];
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['总钱数','平台费用','公司费用','司机费用']
    }, 
    xAxis: [
        {
            type: 'category',
          
             axisLabel : {
                interval:0,
                rotate:"45"
            }
        }
    ],
    grid:{//直角坐标系内绘图网格
    show:true,//是否显示直角坐标系网格。[ default: false ]
    bottom:"15%" //
},
    yAxis: [
        {
            type: 'value',
            name: '每天费用统计表',
            axisLabel: {
                formatter: '{value}'
            }
        },
    ],
    series: [
        {
            name:'总钱数',
            type:'bar',
            barWidth: 30
        },
        {
            name:'平台费用',
            type:'bar',
            barWidth: 30
        },
        {
            name:'公司费用',
            type:'bar',
            barWidth: 30
        },
        {
            name:'司机费用',
            type:'bar',
            barWidth: 30
        }
    ]
};

optionz = {
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            crossStyle: {
	                color: '#999'
	            }
	        }
	    },
	    toolbox: {
	        feature: {
	            dataView: {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar']},
	            restore: {show: true},
	            saveAsImage: {show: true}
	        }
	    },
	    legend: {
	        data:['总钱数','平台费用','公司费用','司机费用']
	    }, 
	    xAxis: [
	        {
	            type: 'category',
	          
	             axisLabel : {
	                interval:0,
	                rotate:"45"
	            }
	        }
	    ],
	    grid:{//直角坐标系内绘图网格
	    show:true,//是否显示直角坐标系网格。[ default: false ]
	    bottom:"15%" //
	},
	    yAxis: [
	        {
	            type: 'value',
	            name: '每月费用统计表',
	            axisLabel: {
	                formatter: '{value}'
	            }
	        },
	    ],
	    series: [
	        {
	            name:'总钱数',
	            type:'bar',
	            barWidth: 30
	        },
	        {
	            name:'平台费用',
	            type:'bar',
	            barWidth: 30
	        },
	        {
	            name:'公司费用',
	            type:'bar',
	            barWidth: 30
	        },
	        {
	            name:'司机费用',
	            type:'bar',
	            barWidth: 30
	        }
	    ]
	};
optionA = {
		color : ['#d48265'],
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            crossStyle: {
	                color: '#999'
	            }
	        }
	    },
	    toolbox: {
	        feature: {
	            dataView: {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar']},
	            restore: {show: true},
	            saveAsImage: {show: true}
	        }
	    },
	    legend: {
	        data:['运费每日总和']
	    }, 
	    xAxis: [
	        {
	            type: 'category',
	          
	             axisLabel : {
	                interval:0,
	                rotate:"45"
	            }
	        }
	    ],
	    grid:{//直角坐标系内绘图网格
	    show:true,//是否显示直角坐标系网格。[ default: false ]
	    bottom:"15%" //
	},
	    yAxis: [
	        {
	            type: 'value',
	            name: '运费每日总和',
	            axisLabel: {
	                formatter: '{value}'
	            }
	        },
	    ],
	    series: [
	        {
	            name:'运费每日总和',
	            type:'bar',
	            barWidth: 30
	        }
	    ]
	};
optionB = {
		 color : ['#ff7f50'],
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            crossStyle: {
	                color: '#999'
	            }
	        }
	    },
	    toolbox: {
	        feature: {
	            dataView: {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar']},
	            restore: {show: true},
	            saveAsImage: {show: true}
	        }
	    },
	    legend: {
	        data:['运费每月总和']
	    }, 
	    xAxis: [
	        {
	            type: 'category',
	          
	             axisLabel : {
	                interval:0,
	                rotate:"45"
	            }
	        }
	    ],
	    grid:{//直角坐标系内绘图网格
	    show:true,//是否显示直角坐标系网格。[ default: false ]
	    bottom:"15%" //
	},
	    yAxis: [
	        {
	            type: 'value',
	            name: '运费每月总和',
	            axisLabel: {
	                formatter: '{value}'
	            }
	        },
	    ],
	    series: [
	        {
	            name:'运费每月总和',
	            type:'bar',
	            barWidth: 30
	        }
	    ]
	};
$(function(){
	//初始化开始时间
	laydate.render({
		elem: '#daystartDate',
		fixed: false,
		type: 'date'
	});
	//初始化结束时间
	laydate.render({
		elem: '#dayendDate',
		fixed: false,
		type: 'date'
	});
	laydate.render({
		elem: '#monthstartDate',
		fixed: false,
		type: 'month'
	});
	//初始化结束时间
	laydate.render({
		elem: '#monthendDate',
		fixed: false,
		type: 'month'
	});
	laydate.render({
		elem: '#daystart',
		fixed: false,
		type: 'date'
	});
	//初始化结束时间
	laydate.render({
		elem: '#dayend',
		fixed: false,
		type: 'date'
	});
	laydate.render({
		elem: '#monthstart',
		fixed: false,
		type: 'month'
	});
	//初始化结束时间
	laydate.render({
		elem: '#monthend',
		fixed: false,
		type: 'month'
	});
	
	var startDate;
	var endDate;
	var monthstartDate;
	var monthendDate;
	var daystart;
	var dayend;
	var monthstart;
	var monthend;
	
	//按天统计
 	$('#queryDayStatisticsBtn').click(function(){
 		startDate = $('#daystartDate').val();
 		endDate = $('#dayendDate').val();
 		weekXData.splice(0,weekXData.length);
 		weekupData.splice(0,weekupData.length);
 		weektowData.splice(0,weektowData.length);
 		weekthirdData.splice(0,weekthirdData.length);
 		weekfourthData.splice(0,weekfourthData.length);
		$.ajax({
			type: "post",
			url: "../costsharing/getCostSharingDayStatistics.htm",
			async: true,
			data: {'startDate': startDate, 'endDate': endDate, 'days': -30, 'type': 1},
			dataType: "json",
			success: function(result){
				
				if(result.status == 0){
					var data = result.data;
					
				}
				
				var data=result.data;
        		for(var i=0;i<data.length;i++){
                weekXData.push(data[i].eachDate); 
                weekupData.push(data[i].webCarriage); 
                weektowData.push(data[i].platFormCostSharing);
                weekthirdData.push(data[i].companyCostSharing);
                weekfourthData.push(data[i].driverCostSharing);
    	} 
    		option.xAxis[0].data = weekXData;
			option.series[0].data = weekupData;
			option.series[1].data = weektowData;
			option.series[2].data = weekthirdData;
			option.series[3].data = weekfourthData;
			myBar.setOption(option);
			
			}
		})
	}).trigger('click'); 
	
	//按月统计
$('#queryMonthStatisticsBtn').click(function(){
	monthstartDate = $('#monthstartDate').val();
	monthendDate = $('#monthendDate').val();
	monthXData.splice(0,monthXData.length);
	monthupData.splice(0,monthupData.length);
	monthtowData.splice(0,monthtowData.length);
	monththirdData.splice(0,monththirdData.length);
	monthfourthData.splice(0,monthfourthData.length);
		$.ajax({
			type: "post",
			url: "../costsharing/getCostSharingMonStatistics.htm",
			async: true,
			data: {'startDate': monthstartDate, 'endDate': monthendDate, 'months': -12, 'type': 1},
			dataType: "json",
			success: function(result){
				if(result.status == 0){
					var data = result.data;
				}
				var data2=result.data;
        		for(var i=0;i<data2.length;i++){
                monthXData.push(data2[i].eachDate); 
                monthupData.push(data2[i].webCarriage); 
                monthtowData.push(data2[i].platFormCostSharing);
                monththirdData.push(data2[i].companyCostSharing);
                monthfourthData.push(data2[i].driverCostSharing);
    	} 
    		optionz.xAxis[0].data = monthXData;
			optionz.series[0].data = monthupData;
			optionz.series[1].data = monthtowData;
			optionz.series[2].data = monththirdData;
			optionz.series[3].data = monthfourthData;
			myChar.setOption(optionz);
			
			}
		})
	}).trigger('click'); 
	
	
	/*运费总和  */
	
	
$('#queryDay').click(function(){
	daystart = $('#daystart').val();
	dayend = $('#dayend').val();
	moneyxsumday.splice(0,moneyxsumday.length);
	moneysumday.splice(0,moneysumday.length);
		$.ajax({
			type: "post",
			url: "../order/getCarriageStatistics.htm",
			async: true,
			data: {'start': daystart, 'end': dayend, 'format': "%Y-%m-%d", 'limit': -30},
			dataType: "json",
			success: function(result){
				var data3=result.data;
        		for(var i=0;i<data3.length;i++){
        		moneyxsumday.push(data3[i].orderInsTime); 
        		moneysumday.push(data3[i].carriage); 
    	} 
        		optionA.xAxis[0].data = moneyxsumday;
        		optionA.series[0].data = moneysumday;
				myech.setOption(optionA);
			
			}
		})
	}).trigger('click'); 
	
	
	
$('#queryMonth').click(function(){
	monthstart = $('#monthstart').val();
	monthend = $('#monthend').val();
	moneyxsummonth.splice(0,moneyxsummonth.length);
	moneysummonth.splice(0,moneysummonth.length);
		$.ajax({
			type: "post",
			url: "../order/getCarriageStatistics.htm",
			async: true,
			data: {'start': monthstart, 'end': monthend, 'format': "%Y-%m", 'limit': -12},
			dataType: "json",
			success: function(result){
				var data4=result.data;
        		for(var i=0;i<data4.length;i++){
        			moneyxsummonth.push(data4[i].orderInsTime); 
        			moneysummonth.push(data4[i].carriage); 
    	} 
        		optionB.xAxis[0].data = moneyxsummonth;
        		optionB.series[0].data = moneysummonth;
				myChart.setOption(optionB);
			
			}
		})
	}).trigger('click'); 

	
});


</script>
</body>
</html>